import React, { Component } from "react";

class AsyncState extends Component {
  state = { count: 0 };
  // React中有个概念，叫做batchUpdate（批量更新）
  handleClick = () => {
    // * batchedUpdating = true
    // 18版本：这部分是异步的，打印两个0。17版本，也是异步的，打印两个0.
    this.setState({ count: 1 });
    console.log("this.state.count:", this.state.count); // 0
    this.setState({ count: 2 });
    console.log("this.state.count:", this.state.count); // 0

    setTimeout(() => {
      // 18版本：这部分是异步的，打印两个2。17版本：同步
      this.setState({ count: 3 });
      console.log("this.state.count:", this.state.count); // 2  3
      this.setState({ count: 4 });
      console.log("this.state.count:", this.state.count); // 2  4
    }, 0);
    // * batchedUpdating = false
    // setTimeout的批处理，落后于外部的批处理
  };
  render() {
    return (
      <div>
        <h5>{this.state.count}</h5>
        <button onClick={this.handleClick}>click</button>
      </div>
    );
  }
}

export default AsyncState;
